{% extends "editor/state_editor_row.html" %}

{% block id %}content{% endblock %}

{% block label %}content{% endblock %}

{% block cls %}oppia-state-content{% endblock %}

{% block center %}
  <param-change-editor param-changes="stateParamChanges"
      param-specs="paramSpecs" save-param-changes="saveStateParamChanges"
      add-exploration-param-spec="addExplorationParamSpec"
      is-editable="editabilityService.isEditable()">
  </param-change-editor>

  <hr class="oppia-param-and-content-separator">

  <div ng-if="!contentMemento">
    <button type="button" class="btn btn-default btn-xs pull-right" ng-click="editContent()" ng-if="editabilityService.isEditable()">
      <span class="glyphicon glyphicon-pencil" title="Edit Content"></span>
    </button>
    <span ng-show="content[0].value == ''" class="oppia-placeholder">
      Click the <span class="glyphicon glyphicon-pencil"></span> button on the right to add content.
    </span>
    <span angular-html-bind="content[0].value"></span>
  </div>

  <div ng-if="!!contentMemento">
    <schema-based-editor schema="STATE_CONTENT_SCHEMA" local-value="content[0].value">
    </schema-based-editor>
    <div style="margin-top: 5px;">
      <button type="button" class="btn btn-success pull-right" ng-click="saveTextContent()">Save Content</button>
    </div>
  </div>
{% endblock %}
